<template>
  <div class="">
    <el-row
      type="flex"
      :gutter="0"
      justify="space-between"
      style="width: 100vw; height: 100vh; box-sizing: border-box"
    >
      <el-col
        :span="1"
        :xs="4"
        :sm="1"
        :md="1"
        :lg="1"
        :xl="1"
        style="height: 100vh; background-color: white"
      >
        <el-menu collapse>
          <el-menu-item index="1-1" @click="index">
            <img
              src="@img/index.svg"
              alt=""
              style="height: 24px; width: 24px"
            />
            <span slot="title">主页</span>
          </el-menu-item>

          <el-menu-item index="1-2" @click="checkAppointment">
            <img
              src="@img/my_appointment.svg"
              alt=""
              style="height: 24px; width: 24px"
            />
            <span slot="title">我的预约</span></el-menu-item
          >
          <el-menu-item index="1-3" @click="checkRooms">
            <img
              src="@img/check_room.svg"
              alt=""
              style="height: 24px; width: 24px"
            />
            <span slot="title">阅览室</span></el-menu-item
          >
          <el-menu-item index="1-4" @click="checkFeedback">
            <img
              src="@img/write_feedback.svg"
              alt=""
              style="height: 24px; width: 24px"
            />
            <span slot="title">意见反馈</span></el-menu-item
          >
          <el-menu-item index="1-5" @click="checkMyFeedback">
            <img
              src="@img/my_feedback.svg"
              alt=""
              style="height: 24px; width: 24px"
            />
            <span slot="title">我的意见</span></el-menu-item
          >
        </el-menu>
      </el-col>

      <el-col :span="23" :xs="20" :sm="23" :md="23" :lg="23" :xl="23">
        <el-header class="bar" height="40px">
          <div class="box">
            <div class="notice">{{ notice }}</div>
          </div>
          <el-dropdown size="medium" @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 5px"></i>

            <span class="name">{{ userInfo.username }}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出系统</el-dropdown-item>
              <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <setting-pwd v-if="setPwd" @done="setPwd = false" />
        <setting-info v-if="updateInfo" @done="updateInfo = false" />
        <el-main>
          <div class="index" v-if="$route.name == 'Student'">
            <div class="top">
              <div class="notice" v-if="notices">
                <div style="width: 100%">
                  <div
                    v-for="(notice, index) of currentNotices"
                    :key="index"
                    class="row"
                  >
                    <el-popover
                      placement="bottom"
                      :title="notice.title"
                      width="auto"
                      trigger="click"
                      popper-class="width"
                      :content="notice.content"
                    >
                      <div slot="reference">
                        <div class="content">
                          <div class="title">
                            {{ notice.title }}
                          </div>
                          <div class="date">
                            {{ notice.created_date.slice(0, 11) }}
                          </div>
                        </div>
                        <el-divider></el-divider>
                      </div>
                    </el-popover>
                  </div>
                </div>

                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-count="total"
                  :pager-count="5"
                  style="text-align: center"
                  @current-change="changeIdx"
                >
                </el-pagination>
              </div>
              <div class="calender">
                <el-calendar></el-calendar>
              </div>
            </div>
            <div class="rules">
              <div>馆内须知:</div>
              <div>一、自觉遵守图书馆的各项规章制度。</div>
              <div>二、图书馆可预约时间为三日之内。</div>
              <div>
                三、保持安静，不喧哗，不打闹嬉戏。自觉关闭手机等通讯工具或设置为无声状态。
              </div>
              <div>
                四、爱护环境，保持馆内清洁卫生，不污损墙壁，不随地吐痰，不乱扔纸屑杂物等。
              </div>
              <div>
                五、爱护馆内各种公共财物和设施，不乱拉桌椅，不抢占座位。未经许可不得在馆内张贴广告、散发传单。
              </div>
              <div>
                六、爱护书刊，不涂画、污损书刊，不随意乱放书刊。不可冒用他人借书证借阅书刊。
              </div>
              <div>七、严禁吸烟，严禁携带易燃易爆等任何危险物品入馆。</div>
              <div>
                八、严禁利用馆内现代信息设备进行任何有损国家、学校和他人的违法活动。
              </div>
              <div>九、每位用户只能预约三间不同时间段的阅览室</div>
            </div>
          </div>

          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SettingPwd from "../User/SettingPwd";
import SettingInfo from "../User/SettingInfo";
import { mapGetters, mapMutations, mapState } from "vuex";

import { getNotice } from "@network/manager";

export default {
  components: {
    SettingPwd,
    SettingInfo,
  },
  data() {
    return {
      setPwd: false,
      updateInfo: false,
      rooms: null,
      notices: null,
      total: 0,
      activeIndex: 0,
      line: 6,
      noticeIndex: 0,
      show: false,
      activeNoticeIndex: -1,
    };
  },
  computed: {
    ...mapState(["userInfo", "notice"]),
    ...mapGetters(["isStudent", "isManager"]),
    currentNotices() {
      let begin = this.activeIndex * this.line,
        end = (this.activeIndex + 1) * this.line;

      return this.notices.slice(begin, end);
    },
    // content() {
    //   return this.currentNotices[this.noticeIndex].content;
    // },
  },
  watch: {},
  methods: {
    ...mapMutations(["logout", "setNotice"]),
    getNotice() {
      getNotice().then((res) => {
        if (res.data.tag) {
          this.$set(this, "notices", res.data.data);
          this.setNotice(res.data.data[0].content);
          this.total = Math.ceil(this.notices.length / this.line);
        } else {
          this.$message.error("获取公告数据失败");
        }
      });
    },
    changeIdx(idx) {
      this.activeIndex = idx - 1;
    },

    checkAppointment() {
      if (this.$route.name != "s_Appointment")
        this.$router.push({ name: "s_Appointment" });
    },
    checkRooms() {
      if (this.$route.name != "s_Rooms") this.$router.push({ name: "s_Rooms" });
    },
    checkFeedback() {
      if (this.$route.name != "s_Feedback")
        this.$router.push({ name: "s_Feedback" });
    },
    index() {
      if (this.$route.name != "Student") this.$router.push({ name: "Student" });
    },
    checkMyFeedback() {
      if (this.$route.name != "s_MyFeedback")
        this.$router.push({ name: "s_MyFeedback" });
    },

    async userLogout() {
      this.$confirm("确认退出系统?", "退出系统", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "info",
      })
        .then(() => {
          this.logout();
          this.$router.push("/login");
          this.$message.success("成功退出");
        })
        .catch(() => {
          this.$message.warning("已取消");
        });
    },
    handleCommand(command) {
      console.log("coomand", command);
      if (command === "logout") {
        this.userLogout();
      } else if (command === "changePwd") {
        this.setPwd = true;
      } else if (command === "updateInfo") {
        console.log("updateInfo");
        this.updateInfo = true;
      }
    },
  },
  created() {
    if (this.isManager) {
      this.$router.replace({ name: "Manager" });
    }
    this.getNotice();
  },
  mounted() {},
};
</script>
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  width: 100%;
}

.el-aside {
  color: #333;
}

.name {
  font-size: 1vw;
}

.icon {
  width: 24px;
  height: 24px;
}

.bar {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  line-height: 40px;
  background-color: rgb(238, 241, 246);
}

.box {
  width: 75%;
  overflow: hidden;
}

.bar > .box > .notice {
  animation: scroll 10s 0s linear infinite;
  width: 60vw;
  box-sizing: border-box;
  overflow: hidden;
}

@keyframes scroll {
  0% {
    margin-left: -100%;
  }
  100% {
    margin-left: 100%;
  }
}
.index {
  width: 100%;
  height: 88vh;
  position: relative;
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 60px;
  box-sizing: border-box;
  overflow: auto;
}

.index > .top {
  display: flex;
  justify-content: space-between;
  height: 60%;
  overflow: auto;
}

.index > .top > .calender {
  width: 30%;
}

>>> .el-menu--collapse {
  width: initial;
}

>>> .el-menu-item * {
  text-align: center;
}

.width {
  width: 100%;
  height: 100%;
}

.index > .top > .notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 60%;
}

.index > .top > .notice .row {
  width: 100%;
}

.index > .top > .notice .row .content {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  box-sizing: border-box;
}

.index > .top > .notice .row .content > .title {
  font-size: 18px;
  font-weight: bold;
}

.index > .top > .notice .row .content > .date {
  color: skyblue;
}

>>> .el-calendar__header {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.el-submenu >>> .el-submenu__title {
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/ .el-calendar-day {
  height: 100%;
}

/deep/ .el-popover__reference {
  line-height: 100%;
}
.rules {
  border: 1px solid skyblue;
  border-radius: 10px;
  padding: 10px 20px;
  background-color: gainsboro;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  letter-spacing: 10px;
  /* font-size: 18px; */
  height: 35%;
  overflow: auto;
}

.rules :first-child {
  font-size: 20px;
  font-weight: bold;
  color: slateblue;
}

.rules :not(:first-child) {
  color: red;
}

@media screen and (max-width: 480px) {
  .calender {
    width: 270px;
  }
  .bar {
    font-size: 1vw;
  }

  .index > .top {
    height: 80%;
  }

  >>> .el-calendar-table .el-calendar-day {
    height: 40px;
    width: 40px;
  }

  .index > .top > .notice {
    width: 100%;
    font-size: 12px;
    padding: 20px 0;
    box-sizing: border-box;
  }

  .index > .top > .notice .row .content > .title {
    font-size: 13px;
  }

  .index > .top > .notice .row {
    height: 50px;
  }

  .el-popover__reference {
    height: 50px;
    width: 100%;
    overflow: auto;
  }

  .calender {
    display: none;
  }

  .index {
    padding: 5px 10px;
  }

  .rules {
    height: 180px;
    font-size: 12px;
    letter-spacing: 2px;
  }

  >>> *::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .questions-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  .questions-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
}
</style>
